<template>
  <div class="userLuck">
     <yd-navbar :title="title">
       <router-link to="/userIndex" slot="left">
            <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
    </yd-navbar>
    <div style="background:#fff;text-align:center;padding:.2rem 0;">
      <img style="border:1px solid #ececec;margin:.2rem auto;" src="/static/img/product.jpg" alt="">
      <div class="luck-title">iphone 8 一台</div>
      <yd-countdown slot="right" time="2017/10/18 00:00:00" class="countdown">
            距离开奖还有：
            <em>{%d0}</em><em>{%d1}</em><em>{%d2}</em>天
            <em>{%h1}</em><em>{%h2}</em>小时
            <em>{%m1}</em><em>{%m2}</em>时
            <em>{%s1}</em><em>{%s2}</em>秒
      </yd-countdown>
    </div>
    <div style="font-size:.26rem;margin:.3rem;">此期兑换码(6个)</div>
     <yd-cell-group>
      <yd-cell-item v-for="n in 6">
        <span slot="left" style="font-size:.26rem;">ABC4324SDDDSFAAASDXXA</span>
        <span slot="right">未开奖</span>
       </yd-cell-item>
    </yd-cell-group>
    <div style="margin:.3rem;text-align:center;">
      <yd-button  type="hollow" shape="circle">往期开奖记录</yd-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userLuck',
  data () {
    return {
      title:"兑换中心",
      username:"用户昵称"
    }
  },
  methods:{
    noOpen: function(){
      this.$dialog.alert({
        title: '手机回收提示您',
        mes: '该功能正在开发中...',
      });
    }
  }
}
</script>
<style >
.yd-cell-right{
  min-height:.9rem;
}
.luck-title{
  font-size: .3rem;margin-bottom: .2rem;
}
.countdown{
  font-size: .3rem;
}
.countdown em{
  color:#f00;
}
</style>
